<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>练习1</title>
    <script src="jquery-3.4.1.min.js"></script>
</head>
<body>
<!--隐藏展示开始-->
<div>
    <p id="p1">清尘沐歌</p>
    <button id="b1">展开</button>
    <button id="b2">收起</button>
</div>
<!--隐藏展示结束-->
<hr>

<div>
    <span id="p2">这很有趣</span>
    <span id="s1"><a href="javaScript:;" style="text-decoration: none">展开...</a></span>

        <span id="p3">，我也觉得。</span>
        <span id="s2"><a href="javaScript:;" style="text-decoration: none">收起</a></span>

</div>


<!--隐藏展示开始-->
<script>
    //方式一
    $(document).ready(function () {
        // 开始写 jQuery 代码...
        $("#b2").click(function () {
            $('#p1').hide();
        })

        $("#b1").click(function () {//click,单击元素时发生的事件（运行的函数）
            $('#p1').show();
        });
    });

    //方式二
    $(function () {

        // 开始写 jQuery 代码...

    });
</script>
<!--隐藏展示结束-->

<script>


    $(function () {


        $("#s1").click(function () {
            $("#p3").show();
            $("#s2").show();
            $("#s1").hide();
        })
        $("#s2").hide();
        $("#p3").hide();

        $("#s2").click(function () {
            $("#p3").hide();
            $("#s2").hide();
            $("#s1").show();
        })
    });
</script>

</body>
</html>